<template >
  <basiccard :header_nav="header_nav">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="params.query" placeholder="请输入内容" clearable @clear="clearGoods">
          <el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addGoods">添加商品</el-button>
      </el-col>
    </el-row>
    <el-table :data="goodsList" stripe border>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="商品名称" prop="goods_name"></el-table-column>
      <el-table-column label="商品价格" width="90px" prop="goods_price"></el-table-column>
      <el-table-column label="商品重量" width="90px" prop="goods_weight"></el-table-column>
      <el-table-column label="创建时间" width="160px" prop="add_time">
        <template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="danger" size="mini" @click="removeGoods(scope.row.goods_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[3, 5, 8, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </basiccard>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      header_nav: {
        path: "/welecome",
        rolesMge: "商品管理",
        rolesList: "商品列表"
      },
      //   商品列表
      goodsList: [],
      //   数据总数
      total: 0,
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      searchShop: ""
    };
  },
  methods: {
    async getGoodList() {
      const { data: res } = await this.$http.get("goods", {
        params: this.params
      });
      if (res.meta.status !== 200) return this.$message.error("获取错误失败");
      console.log(res.data);
      this.goodsList = res.data.goods;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getGoodList();
    },
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.getGoodList();
    },
    // 清空搜索栏
    clearGoods() {
        this.params.query = ''
        this.getGoodList()
    },
    // 删除商品
  async  removeGoods(val) {
         const resconfigdata =  await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        console.log(resconfigdata);
        if(resconfigdata!=='confirm') return this.$message.error('取消了删除')
     const {data:res}  =  await this.$http.delete(`goods/${val}`)
     if(res.meta.status!==200) return this.$message.error('删除失败')
    this.getGoodList() 
     this.$message.success('删除成功')
    },
    // 添加商品
    addGoods() {
        this.$router.push('/goods/add')
    }
 
  },
  created() {
    this.getGoodList();
  }
};
</script>
<style lang="scss" scoped>
</style>